<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>易买网 - 首页</title>
	<link type="text/css" rel="stylesheet" href="css/style.css"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/function.js"></script>
	<!-- 后期引入   -->
	<script type="text/javascript" src="plugins/axios/axios.min.js"></script>
	<script type="text/javascript" src="scripts/request.js"></script>
	<link rel="stylesheet" href="plugins/element-ui/element-ui.css">
</head>
<body>
<div id="app">
	<div id="header" class="wrap">
		<div id="logo"><img src="images/logo.gif"/></div>
		<div class="help"><a href="shopping.html" class="shopping">购物车{{ this.shoppingCar.length }}件</a><a href="login.html">登录</a><a
				href="register.html">注册</a><a href="guestbook.html">留言</a><a href="manage/index.html">后台管理</a>
		</div>
		<div class="navbar">
			<ul class="clearfix">
				<li class="current"><a href="#">首页</a></li>
				<li><a href="#">图书</a></li>
				<li><a href="#">百货</a></li>
				<li><a href="#">品牌</a></li>
				<li><a href="#">促销</a></li>
			</ul>
		</div>
	</div>
	<div id="childNav">
		<div class="wrap">
			<ul class="clearfix">
				<li class="first"><a href="#">音乐</a></li>
				<li><a href="#">影视</a></li>
				<li><a href="#">少儿</a></li>
				<li><a href="#">动漫</a></li>
				<li><a href="#">小说</a></li>
				<li><a href="#">外语</a></li>
				<li><a href="#">数码相机</a></li>
				<li><a href="#">笔记本</a></li>
				<li><a href="#">羽绒服</a></li>
				<li><a href="#">秋冬靴</a></li>
				<li><a href="#">运动鞋</a></li>
				<li><a href="#">美容护肤</a></li>
				<li><a href="#">家纺用品</a></li>
				<li><a href="#">婴幼奶粉</a></li>
				<li><a href="#">饰品</a></li>
				<li class="last"><a href="#">Investor Relations</a></li>
			</ul>
		</div>
	</div>
	<div id="position" class="wrap">
		您现在的位置：<a href="index.html">易买网</a> &gt; 购物车
	</div>
	<div class="wrap">
		<div id="shopping">
			<form action="address.html">
				<table>
					<tr>
						<th>商品名称</th>
						<th>商品价格</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
					<tr id="product_id" v-for="item in shoppingCar" :key="item.id">
						<td class="thumb"><img style="width: 100px; height: 100px" :src=`/common/download?name=${item.photo}`>
							<a :href=`product-view.html?id=${item.productId}`>{{ item.name }}</a></td>
						<td class="price" id="price_id_0">
							<span>￥{{ item.price * item.number }}</span>
							<input type="hidden" value="99"/>
						</td>
						<td class="number">
							<span name="del" @click="decreaseNumber(item)">-</span>
							<input id="number_id_0" type="text" name="number" v-model="item.number"/>
							<span name="add" @click="increaseNumber(item)">+</span>
						</td>
						<td class="delete"><a href="#" @click.prevent="removeItem(item)">删除</a></td>
					</tr>
				</table>
				<div class="total"><span id="total">总计：￥{{ totalPrice }}</span></div>
				<div class="button"><input type="submit" value=""/></div>
			</form>
		</div>
	</div>
	<div id="footer">
		Copyright &copy; 2013 项目组 All Rights Reserved. 京ICP证1000001号
	</div>
</div>

<script type="text/javascript" src="plugins/vue/vue.js"></script>
<script type="text/javascript" src="api/common.js"></script>
<script type="text/javascript" src="api/parentCategories.js"></script>
<script type="text/javascript" src="api/subCategories.js"></script>
<script type="text/javascript" src="api/product.js"></script>
<script type="text/javascript" src="plugins/element-ui/element-ui.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: '#app',
		data: {
			shoppingCar: [],
			loading: false,
		},
		mounted() {
			this.shoppingCar = JSON.parse(sessionStorage.getItem("ordersDetailList")) === null ? [] : JSON.parse(sessionStorage.getItem("ordersDetailList"));
			console.log(this.shoppingCar )
		},
		methods: {
			increaseNumber(item) {
				item.number++;
			},
			decreaseNumber(item) {
				if (item.number > 1) {
					item.number--;
				}else {
					this.$message({
						message: '只剩下一件商品了噢',
						type: 'warning'
					});
				}
			},
			removeItem(item) {
				this.shoppingCar = this.shoppingCar.filter(i => i !== item);
				sessionStorage.setItem("ordersDetailList", JSON.stringify(this.shoppingCar))
			},
		},
		computed: {
			totalPrice() {
				return this.shoppingCar.reduce((total, item) => {
					return total + (item.price * item.number);
				}, 0);
			}
		}
	})
</script>
</body>
</html>
